<template>
      <div class="apples" >
      <!-- 商品页面 -->
      <ul>
        <li v-for="p in info" :key="p.id">
          <div class="shop">
      
            <img  :src="p.url" class="fruit" >
            
            <p>{{p.charge}}</p>
            <p>{{p.information}}</p>
            <el-button type="danger" plain class="btncar" icon="el-icon-goods" @click="translateinfo(p)">加入购物车</el-button>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
 //import axios from 'axios'
export default {
    name:"Apples",
    //props:["info"],
    data() {
        return {
                  arr:[]     
                }
    },
    computed:{
      info(){
        return this.$route.query.info
      }
    },
    mounted(){

      console.log(this.$route.query.info);
    },
    //加入购物车功能，通过全局事件总线 给购物车传递数据
    methods:{
      translateinfo(p){
        p.done=false;
        this.arr.push(p);
        console.log(this.arr);
        this.$bus.$emit("demo",this.arr);
        
      }
    },
    beforeDestroy(){
      
    }
    
}
</script>

<style scoped>
.appples{

  background-image: linear-gradient(#e66465, #9198e5);
}
li{
  list-style: none;
}
.fruit{
  float: left;
}

.shop{
  position: relative;
  left: 50px;
  margin: 18px;
  width: 230px;
  height: 370px;
  float: left;
  text-shadow: 5px 5px 5px #FF0000;
  font-size: 12px;
  color:darkgoldenrod;
  border: 2px solid skyblue;
  border-radius: 20px;
  /* 给盒子点复古效果 */
  box-shadow: 30px 30px 100px peru;
  /* background-image: linear-gradient(#e66465, #9198e5); */
}
.shop img{
  width: 100%;
}
.btncar{
    width: 120px;
    height: 35px;
    text-align: center;
  /* display: none; */
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.directive{
  position: relative;
  left: 110px;
}

</style>